<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- 引入样式 -->
    <script src="../../js/dayjs.min.js"></script>
    <script src="../../js/vue.js"></script>
    <script src="../../js/axios.min.js"></script>
    <script src="../../plugins/element_UI/index.js"></script>
    <link rel="stylesheet" href="../../plugins/element_UI/index.css">
</head>
<body>
<div id="app">
    <el-row class="el-search-row-d" style="margin-right: auto">
<!--                <template>-->
<!--                    <el-radio v-model="status" label="1">注销</el-radio>-->
<!--                    <el-radio v-model="status" label="0">正常</el-radio>-->
<!--                </template>-->
<!--        <el-input-->
<!--                placeholder="名称模糊查"-->
<!--                v-model="hosName"-->
<!--                @change="init"-->
<!--                style="width: fit-content"-->
<!--                clearable-->
<!--                @keyup.native="chinese">-->
<!--        </el-input>-->
<!--        <el-button type="primary" icon="el-icon-search" @click="init">搜索</el-button>-->
<!--        <el-button type="primary"  @click="upload" :disabled="true">12580上传<i class="el-icon-upload el-icon&#45;&#45;right"></i></el-button>-->
<!--        <el-button size="small" type="primary" @click="init">检索</el-button>-->
<!--        <el-button type="small" @click="dialogFormVisible = true">添加</el-button>-->
        <el-button type="primary" @click="jktUpload">上传(健康通)</el-button>
    </el-row>
    <el-dialog  :close-on-click-modal="false" :destroy-on-close="true"  title="添加/修正" :visible.sync="dialogFormVisible" @close="closeDiglog">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="140px" class="demo-ruleForm">
            <el-form-item label="医院名称" prop="hosName">
                <el-input v-model="ruleForm.hosName" @keyup.native="chinese" type="text" maxlength="80"
                          show-word-limit></el-input>
            </el-form-item>
            <!--            <el-form-item label="机构编码" prop="hosCode" >-->
            <!--                <el-input v-model="ruleForm.hosCode"></el-input>-->
            <!--            </el-form-item>-->
            <el-form-item label="医院简称" prop="hosShortName">
                <el-input v-model="ruleForm.hosShortName"  @keyup.native="chinese" type="text" maxlength="50"
                          show-word-limit></el-input>
            </el-form-item>

            <el-form-item label="医院等级" prop="hosGrade">
                <el-select v-model="ruleForm.hosGrade" placeholder="请选择">
                    <el-option label="三级" value="0"></el-option>
                    <el-option label="二级" value="3"></el-option>
                    <el-option label="一级" value="6"></el-option>
                    <el-option label="门诊部" value="9"></el-option>
                    <el-option label="其他" value="11"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="医院介绍" prop="description"  >
                <el-input v-model="ruleForm.description" placeholder="请输入内容" type="textarea" maxlength="500"
                          show-word-limit  @keyup.native="chinese"></el-input>
            </el-form-item>
            <el-form-item label="医院联系地址" prop="hosContactAddress"  >
                <el-input v-model="ruleForm.hosContactAddress" placeholder="请输入内容" type="textarea" maxlength="200"
                          show-word-limit @keyup.native="chinese" ></el-input>
            </el-form-item>
            <el-form-item label="中间服务地址" prop="hosRegionalCode"  >
                <el-input v-model="ruleForm.hosRegionalCode" placeholder="请输入内容" type="textarea" maxlength="200"
                          show-word-limit @keyup.native="chinese" ></el-input>
            </el-form-item>

            <el-form-item label="医院联系电话" prop="hosPhone">
                <el-input v-model="ruleForm.hosPhone" type="text" placeholder="请输入联系电话 固话：区号-后八位 或者手机号" maxlength="100"
                          show-word-limit></el-input>
            </el-form-item>

            <el-form-item label="官方网站" prop="hosWeb">
                <el-input v-model="ruleForm.hosWeb" type="text" placeholder="请输入内容" maxlength="100"
                          show-word-limit @keyup.native="chinese"></el-input>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
    <template>
        <el-table
                :data="tableData"
                style="width: 100%"
                @current-change="handleCurrentChange"
                max-height="600">
            <el-table-column
                    prop="hosName"
                    label="医院名称"
                    width="130">
            </el-table-column>
            <el-table-column
                    prop="hosShortName"
                    label="医院简称"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="description"
                    label="医院介绍"
                    :show-overflow-tooltip="true"
                    width="300">
            </el-table-column>
            <el-table-column
                    prop="hosContactAddress"
                    :show-overflow-tooltip="true"
                    label="医院联系地址"
                    width="200">
            </el-table-column>
            <el-table-column
                    prop="hosRegionalCode"
                    :show-overflow-tooltip="true"
                    label="中间服务地址"
                    width="200">
            </el-table-column>
            <el-table-column
                    prop="hosPhone"
                    label="医院联系电话"
                    width="160">
            </el-table-column>
            <el-table-column
                    label="操作"
                    width="120">
                <template slot-scope="scope">
                    <el-button
                            @click.native.prevent="deleteRow(scope.$index,scope.row)"
                            type="success"
                            size="mini" circle>
                        移除
                    </el-button>
                    <el-button
                            @click.native.prevent="editRow(scope.$index,scope.row)"
                            type="primary"
                            size="mini" circle>
                        修改
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
    </template>
</div>
</body>
<script>
    let app = new Vue({
        el: '#app',
        data() {
            var checkPhone = (rule, value, callback) => {
                if (!value) {
                    return callback(new Error('联系电话不能为空'));
                } else {
                    const reg1 = /^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/
                    const reg3 = /\d{3}-\d{8}|\d{4}-\d{7}/
                    if (reg1.test(value)  ||  reg3.test(value)) {
                        callback();
                    } else {
                        return callback(new Error('请输入正确的联系电话'));
                    }
                }
            };
            return {
                tableData: [],
                hosName: "",
                hospitalId: JSON.parse(localStorage.getItem("user")).hospitalId ,
                status: 0,
                loading: false,
                currentUpRow: null,
                title: "",
                ruleForm: {
                    chinaSpell: '',
                    description: "",
                    fiveStroke: null,
                    hosCode: "",
                    hosContactAddress: '',
                    hosGrade: "3",
                    hosMarkCode: null,
                    hosName: "",
                    hosPhone: '',
                    hosRegionalCode: null,
                    hosShortName: '',
                    hosType: null,
                    hosWeb: null,
                    id: null,
                    status: "0"
                },
                rules: {
                    hosName: [
                        {required: true, message: '请输入医院名称', trigger: 'blur'},
                        {min: 3, max: 80, message: '长度在 2 到 80 个字符', trigger: 'blur'}
                    ],
                    hosShortName: [
                        {required: true, message: '请输入医院名称', trigger: 'blur'},
                        {min: 3, max: 50, message: '长度在 3 到 50 个字符', trigger: 'blur'}
                    ]
                },
                dialogTableVisible: false,
                dialogFormVisible: false,
                formLabelWidth: '120px'
            }
        },
        methods: {
            chinese:function(){
                this.ruleForm.hosName=this.ruleForm.hosName.replace(/[^\u4E00-\u9FA5]/g, '');
                this.ruleForm.hosShortName=this.ruleForm.hosShortName.replace(/[^\u4E00-\u9FA5]/g, '');
                this.ruleForm.description=this.ruleForm.description.replace(/\s+/g, '');
                this.ruleForm.hosContactAddress=this.ruleForm.hosContactAddress.replace(/\s+/g, '');
                this.hosName=this.hosName.replace(/[^\u4E00-\u9FA5]/g, '');
            },
            init: function () {
                let that = this
                that.loading = false
                axios.post("http://" + window.location.host + '/hospital/select_list', {
                    hosName: this.hosName,id: this.hospitalId
                }).then(res => {
                    that.tableData = res.data.data;
                }).catch((e) => {
                    alert('获取数据失败');
                });
            },
            handleCurrentChange(val) {
                this.currentUpRow = val;
                console.log(this.currentUpRow)
            },
            closeDiglog: function () {
                return this.ruleForm = {
                    chinaSpell: '',
                    description: "",
                    fiveStroke: null,
                    hosCode: "",
                    hosContactAddress: '',
                    hosGrade: "3",
                    hosMarkCode: '',
                    hosName: "",
                    hosPhone: '',
                    hosRegionalCode: '',
                    hosShortName: '',
                    hosType: '',
                    hosWeb: '',
                    id: null,
                    status: "0"
                }
            },
            jktUpload: function(){
                let params = new URLSearchParams()
                if (this.hospitalId==null){
                    this.hospitalId=0;
                }
                params.append("hospitalId", this.hospitalId)
                axios.post("http://" + window.location.host + '/hospital/jktUpload', params).then(res => {
                    this.$message({
                        showClose: true,
                        type: 'success',
                        message: res.msg
                    });
                }).catch((error) => {
                    this.$message({
                        showClose: true,
                        type: 'error',
                        message:  error.response.data.message
                    });
                });
            },
            upload: function(){
                let params = new URLSearchParams()
                params.append("hospitalId", this.hospitalId)
                axios.post("http://" + window.location.host + '/hospital/upload', params).then(res => {
                    this.$message({
                        showClose: true,
                        type: 'success',
                        message: "上传到省平台成功！"
                    });
                }).catch((error) => {
                    this.$message({
                        showClose: true,
                        type: 'error',
                        message:  error.response.data.message
                    });
                });
            },
            submitForm: function (ruleForm) {
                this.$refs[ruleForm].validate((valid) => {
                    if (valid) {
                        let url
                        if (this.ruleForm.id){
                            url="/hospital/update_by_primary_key_selective";
                        }else {
                            url="/hospital/create";
                        }
                        axios.post("http://" + window.location.host + url, this.ruleForm).then(res => {
                            alert("保存成功!");
                            this.closeDiglog()
                            this.init()
                            this.dialogFormVisible = false
                        }).catch(function (error) {
                            alert("保存失败！")

                        });
                    } else {
                        console.log('保存失败！');
                        return false;
                    }
                });
            },
            deleteRow: function (index, row) {
                this.$confirm('请谨慎删除医院信息，删除后可能导致其他功能异常, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    let params = new URLSearchParams()
                    params.append("id", row.id)
                    console.log(row.id);
                    axios.post("http://" + window.location.host + '/hospital/delete_by_primary_key',
                        params
                    ).then(res => {
                        alert("删除成功！");
                        this.tableData.splice(index, 1);
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            editRow: function (index, row) {
                this.ruleForm = row;
                console.log(this.ruleForm)
                this.dialogFormVisible = true
            }
        },
        created() {
            this.init()
        },
        mounted() {
        }
    });
</script>

</html>
